<template>
  <div class="content-container">
    <!-- <button @click="getRequest">获取请求</button> -->
    <!-- <div v-if="data.loading">加载中</div> -->
    <!-- <ul v-if="data.loaded">
      <li v-for="(item, index) in data" :key="index">
        {{ item }}
      </li>
    </ul>
    <button @click="getResult">动态加载</button>
    <button @click="count++">watch 动态修改</button>
    {{ count }}
    <div v-if="funResult?.loading">watch 监听获取数据</div>
    <ul v-if="funResult?.loaded">
      watch 监听获取数据 结果
      <li v-for="(item, index) in data" :key="index">
        {{ item }}
      </li>
    </ul> -->
    <!-- <div v-show="show">
      <div v-for="(item, index) in data" :key="index">
        <test-demo :item="item" />
      </div>
      <button @click="change">切换位置</button>
    </div>
    <div v-show="!show">不展示</div> -->

    <uploader
      action="http://localhost:3000/api/utils/upload-img"
      :drag="true"
      listType="picture"
    />
    <template-list :list="testData" />
  </div>
</template>

<script lang="ts">
import {
  onMounted,
  defineComponent,
  computed,
  ref,
  getCurrentInstance,
} from "vue";
import { useStore } from "vuex";
import TemplateList from "@/components/TemplateList.vue";
import Uploader from "@/components/Uploader.vue";
import { GlobalDataProps } from "../store";
// import useRequest from "@/hooks/useRequest";
// import TestDemo from "@/components/test.vue";
export default defineComponent({
  components: {
    TemplateList,
    Uploader,
    // TestDemo,
  },
  setup() {
    const store = useStore<GlobalDataProps>();
    const ctx: any = getCurrentInstance();
    const show = ref(false);
    let data = ref([
      {
        key: "11111111111111111111111",
        value: "One",
        hasConnection: false,
      },
      {
        key: "222222222222222222222222",
        value: "Two",
      },
      {
        key: "333333333333333333333333",
        value: "Three",
      },
      {
        key: "444444444444444444444444",
        value: "Four",
      },
      {
        key: "5555555555555555555555",
        value: "Five",
      },
    ]);
    const testData = computed(() => store.state.templates.data);
    // const data = useRequest(
    //   "https://www.fastmock.site/mock/9b92a088123e1ea5cd81855cb39dd7cf/front_pass_test/admin/newnoaapplicationswitchessnapshot/page"
    // );
    // let funResult = ref<any>(null);
    // const getResult = () => {
    //   let data = useRequest(
    //     "https://www.fastmock.site/mock/9b92a088123e1ea5cd81855cb39dd7cf/front_pass_test/admin/newnoaapplicationswitchessnapshot/page"
    //   );
    //   if (funResult.value?.loaded) {
    //     funResult.value.result = data.result;
    //   } else {
    //     funResult.value = data;
    //   }
    // };
    // let count = ref(0);
    const change = () => {
      let testData = [
        {
          key: "11111111111111111111111",
          value: "One",
        },
        {
          key: "333333333333333333333333",
          value: "Three",
        },
        {
          key: "222222222222222222222222",
          value: "Two",
        },
        {
          key: "444444444444444444444444",
          value: "Four",
        },
        {
          key: "5555555555555555555555",
          value: "Five",
        },
      ];
      testData.forEach((item: any) => {
        const connection = "999";
        item.hasConnection = item.key + item.value;
        item.connection = connection;
      });
      data.value = testData;
      ctx.$forceUpdate();
    };
    onMounted(() => {
      console.log("启动了");
      setTimeout(() => {
        show.value = true;
      }, 2000);
    });
    // watch(count, (newValue, oldValue) => {
    //   if (newValue !== oldValue) {
    //     getResult();
    //   }
    // });
    return {
      show,
      testData,
      data,
      change,
      // count,
      // data,
      // getResult,
      // funResult,
    };
  },
});
</script>

<style lang="scss" scoped>
.content-container {
  background: #fff;
  padding: 0 24px 24px 30px;
  padding: 0;
  margin: 0;
  min-height: calc(100vh - 64px - 70px - 104px);
  max-width: 1200px;
  margin: 50px auto;
  width: 100%;
  .page-title {
    color: #fff;
  }
}
</style>
